<script setup lang='ts'>
import type { VxeGridProps, VxePagerEvents } from 'vxe-table'

import { Search } from '@element-plus/icons-vue'
import { useGetDealerList } from '@fl/api/man-api'
import { SearchTable } from '@fl/components'
import { ElCard } from 'element-plus'
import { cloneDeep, debounce } from 'lodash-es'
import { useRoute, useRouter } from 'vue-router'

const { query } = useRoute()
const { go } = useRouter()

const records = ref()
const title = computed(() => {
    return query?.source === 'manufacturer' ? '查看经销商' : '查看厂家'
})

const state = ref({
    name: '',
})

const params = computed(() => ({
    id: query?.id,
    type: query?.type,
    ...state.value,
}))

const STATUS_DICT = {
    0: {
        bg: 'bg-stone-500',
        label: '审核中',
    },
    2: {
        bg: 'bg-green-500',
        label: '合作中',
    },
    3: {
        bg: 'bg-orange-500',
        label: '审核不通过',
    },
    4: {
        bg: 'bg-red-500',
        label: '终止合作',
    },
    5: {
        bg: 'bg-rose-950',
        label: '已冻结',
    },
}

const { data: tableData, isLoading } = useGetDealerList(params)

const gridOptions = reactive<VxeGridProps>({
    align: 'center',
    columnConfig: {
        resizable: true,
    },
    columns: [
        { field: 'name', title: query?.source === 'manufacturer' ? '经销商名称' : '企业名称' },
        { field: 'brandName', title: '申请代理品牌' },
        { field: 'createBy', title: '申请人' },
        { field: 'applyTime', title: '企业认证时间' },
        { field: 'createTime', title: '申请时间' },
        { field: 'status', slots: { default: 'status' }, title: '状态' },
    ],
    data: [
        {
            a1: 'xxx',
        },
    ],
    editConfig: {
        mode: 'row',
        showStatus: true,
        trigger: 'manual',
    },
    height: 400,
    keepSource: true,
    showOverflow: true,
    toolbarConfig: {
        slots: {
            buttons: 'toolbar_buttons',
        },
    },
})

watchEffect(() => {
    if (tableData.value) {
        records.value = cloneDeep(tableData.value)
    }
})

const debouncedSearch = debounce((value: string) => {
    // 在这里处理你的搜索或校验逻辑
    state.value.name = value
}, 500) // 延迟500毫秒后执行

function handleDebouncedInput(value: string) {
    debouncedSearch(value)
}

function goback() {
    go(-1)
}
</script>

<template>
    <ElCard shadow="never">
        <div class="mb-20 text-16 font-700">
            {{ title }}
        </div>

        <SearchTable v-bind="gridOptions"
                     :loading="isLoading"
                     :data="records"
                     row-class-name="table-row-style"
        >
            <template #toolbar_buttons>
                <div class="flex w-full justify-between">
                    <div>{{ query?.name }}</div>

                    <el-input v-model="state.name"
                              style="width: 300px"
                              clearable
                              placeholder="请输入关键字"
                              class="input-with-select"
                              @input="handleDebouncedInput"
                    >
                        <template #append>
                            <ElButton :icon="Search"

                                      style="background: #da0004; color:#fff"
                            />
                        </template>
                    </el-input>
                </div>
            </template>

            <template #status="{ row }">
                <span class="inline-block rounded-full h-8 w-8"
                      :class="STATUS_DICT[row.status]?.bg"
                />
                {{ row.statusName }}
            </template>
        </SearchTable>

        <div class="mt-20 flex justify-center">
            <el-button @click="goback">
                返回
            </el-button>
        </div>
    </ElCard>
</template>
